<template>
  <div class="box">
    <h1>{{ msg }}</h1>
    <hr />
    <!-- 在使用的时候切记：别忘记前面v- -->
    <h1 v-upper="msg"></h1>
  </div>
</template>

<script>
export default {
//Vue框架允许程序员自定义指令：比如豪哥想创建一个自定义指令v-upper.指令的作用是可以把字符都变为大写的

  data() {
    return { msg: "我是子组件lmyyyyyy" };
  },
  //新增一个配置项directives[指令的含义]
  directives: {
    //底下即为自定义指令写法:书写的时候，不需要书写v-.但是在使用的时候，直接v-upper即可！！！
    //底部函数：当程序员使用v-upper指令的时候会执行一次！！！
    upper(element, options) {
           //   //element形参:当前绑定指令的真实的DOM节点
      //   //options形参:当前指令一些配置项参数【对象】
      //   //自定义指令：实质可以获取到真实DOM节点，操作DOM节点！！！
      element.innerHTML = options.value.toUpperCase();
    },
  },
};
//注意:当前指令在那个组件定义、只能在当前组件中使用。
//定义的指令：局部指令。
</script>

<style scoped>
.box {
  width: 400px;
  height: 200px;
  background: red;
}
</style>